<template>
    <div class='conch'>
        <div class="conchnav">
            <van-nav-bar
                title="云贝中心"
                left-text=""
                left-arrow
                @click-left="onClickLeft"
                />
        </div>
        <div class="zhangdan">
            <div class="conchinfo" :on="conchinfoo()">
                <h5>{{conchinfo}}</h5>
                <span>云贝账单></span>
            </div>
            <div class="conchsign">
                <div class="conchsignl"></div>
                <div class="conchsignr" :on="conchsignn()">
                    <h5>签到领取奖励</h5>
                    <span>已经签到<h5>{{conchsign}}</h5>天</span>
                </div>
            </div>
            <div class="getconchsign">
                <button @click="getconchsign()">
                    签到领云贝
                </button>
            </div>
        </div>
        <div class="conchbox">
            <h2>做任务赚云贝</h2>
            <van-cell title="听音乐30分钟" icon="service-o" label="每日满30分钟可领">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                   <van-button round type="info" color="linear-gradient(to right, #ff6034, #ee0a24)">去听歌</van-button>
                </template>
            </van-cell>
        </div>
        <div class="conchbox">
            <van-cell title="听播客" icon="music-o" label="收听博客3分钟">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                   <van-button round type="info" color="linear-gradient(to right, #ff6034, #ee0a24)">去收听</van-button>
                </template>
            </van-cell>
        </div>

        <div class="task">
            <div class="taska">
                <p>全部任务></p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    
    data() {
        
        return {
            imgurl:require('../conch/img/zhangdan.png'),
            conchinfo:'',
            conchsign:'',
            point:''
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        conchinfoo(){
            axios 
                .get('http://localhost:3000/yunbei',{
                    withCredentials:true,
                })
                .then((result)=>{
                    if(result.data.code==200){
                        // console.log(result);
                        this.conchinfo=result.data.data.shells;
                        // console.log(this.conchinfo);
                    }
                })
                
        },
        conchsignn(){
            axios 
                .get(`http://localhost:3000/yunbei`,{
                    withCredentials:true,
                })
                .then((result)=>{
                    if(result.data.code==200){
                        // console.log(result);
                        this.conchsign=result.data.data.days;
                        // console.log(this.conchsign);
                    }
                })
        },
        getconchsign(){
            axios 
                .get(`http://localhost:3000/yunbei/sign`,{
                    withCredentials:true,
                })
                .then((result)=>{
                    if(result.data.code==200){
                        console.log(result);
                        this.point=result.data.point;
                        console.log(this.point);
                    }
                })
        }
    },
    
    
    created() {
        
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
    .conch{
        /* background-color: rgba(211, 206, 206, 0.89); */
    }
    .conchnav{
    }
    .van-nav-bar{
        height: 23%;
        border-radius: 0px 0px 58px 58px;
        background-color: #db761a00;;

    }
     .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
  .taska{
      text-align: center;
      color: #00000057;;
  }
</style>